$("#div1").waterfall({
  itemClass: ".box",
 
  minColCount: 3,
  spacingWidth: 20,
  spacingHeight: 20,
  resizeable: true,
  ajaxCallback: function (success, end) {
    var data = {
      "data": [
        { "src": "03.jpg" }, { "src": "04.jpg" }, { "src": "02.jpg" }, { "src": "05.jpg" }, { "src": "01.jpg" }, { "src": "06.jpg" }
      ]
    };
    var str = "";
    // var templ = '<div class="box" style="opacity:0;filter:alpha(opacity=0);"><div class="pic"><img src="../img/{{src}}" /></div></div>'

    var templ = `  <div class="box">
      <div class="tutou">
      <a href=""> <img src="../img/{{src}}" alt=""> </a>
      </div>
      <div class="footer">
        <a href="#"> <span class="uname">绘画小兔子</span> </a>
        <div class="author-wrapper">
          <a href="denglu.html" class="author" target=“_blank”>
            <img class="author-avatar" src="../img/葫芦娃.jpg" alt="">
            <span>Like and fit</span>
          </a>
          <div class="tubiao">
            <span class="iconfont icon-aixin "></span>
            <span class="count">100</span>
          </div>
         
        </div>
      </div>
    </div>`
    for (var i = 0; i < data.data.length; i++) {
      str += templ.replace("{{src}}", data.data[i].src);
    }
    $(str).appendTo($("#div1"));
    success();
    end();
  }
});

// 滚动事件
(function () {
  const back = document.querySelector('.back-top')
  window.addEventListener('scroll', function () {
    // 执行的操作
    if (document.documentElement.scrollTop >= 300) {
      back.style.opacity = 1;
    }

    if (document.documentElement.scrollTop <= 300) {
      back.style.opacity = 0;
    }
  }
  )
  back.addEventListener('click', function () {
    document.documentElement.scrollTop = 0
  })
})();

// 主页关注点击事件
(function fun() {
  const aixin = document.querySelectorAll('.icon-aixin')
  const count = document.querySelectorAll('.count')
  // console.log(aixin)
  for (let i = 0; i < aixin.length; i++) {
    aixin[i].addEventListener('click', function () {
      aixin[i].classList.toggle('active')
      if (document.querySelector('.active')) {
        count[i - 1].innerHTML++
      } else {
        count[i - 1].innerHTML--
      }
    })
  }
})();

// 个人信息页面
(function () {
  const uname = document.querySelectorAll('.uname')
  const geren = document.querySelector('.geren')
  const guanbi = document.querySelector('.guanbi')
  const body = document.querySelector('body')
  const arr = Array.from(uname)
  console.log(uname);
  for (let i = 0; i < arr.length; i++) {
    arr[i].addEventListener('click', function () {
      geren.style.display = 'block';
      body.style.overflow = 'hidden'
    })
  }
  guanbi.addEventListener('click', function () {
    geren.style.display = 'none';
    body.style.overflow = 'auto'
  })
})();

// 轮播图
(function () {
  const sliderData = [
    { url: '../img/01.jpg' },
    { url: '../img/02.jpg' },
    { url: '../img/03.jpg' },
    { url: '../img/04.jpg' },
  ]

  const gerenzhuyetu = document.querySelector('.gerenzhuyetu')
  const prev = document.querySelector('.prev')
  const next = document.querySelector('.next')
  const tuopianyeshu = document.querySelector('.tuopianyeshu')
  // function 更新DOM
  function updateBanner() {
    gerenzhuyetu.src = sliderData[i].url
    // 小圆点 先删除之前的 再添加当前的
    // 删除小圆点
    document.querySelector('.slider-indicator .active2').classList.remove('active2')
    // 添加小圆点
    document.querySelectorAll('.slider-indicator li')[i].classList.add('active2')
    tuopianyeshu.innerHTML = `${i + 1}/4`
  }
  let i = 0
  // 显示下一张
  function showNext() {
    // i++
    // 边界条件
    i++
    if (i >= sliderData.length) {
      i = 0
    }
    updateBanner()
  }
  // 显示上一张
  function showPrev() {
    // i--
    // 边界条件
    i--
    if (i < 0) {
      i = sliderData.length - 1
    }
    updateBanner()
  }

  // 点击按钮显示下一张 点击事件
  next.addEventListener('click', showNext)

  // 点击按钮显示上一张
  prev.addEventListener('click', showPrev)


})();

// 二维码
(function () {
  const fenxiang = document.querySelector('.fenxiang')
  const erweima = document.querySelector('.erweima')
  let flag = true
  fenxiang.addEventListener('click', function () {
    if (flag) {
      erweima.style.display = 'block'
      flag = !flag
    } else {
      erweima.style.display = 'none'
      flag = true
    }

  })
})();

// 个人信息关注事件
(function () {
  const guanzhu = document.querySelector('.guanzhu')
  const tc = document.querySelector('.tc')
  const mask = document.querySelector('.mask')
  let flag = true
  guanzhu.addEventListener('click', function () {
    if (flag) {
      this.classList.add('bian')
      guanzhu.innerHTML = '已关注'
      flag = false
    } else {
      tc.style.display = 'block'
      mask.style.display = 'block'
      tc.addEventListener('click', function (e) {
        if (e.target.dataset.io === '0') {
          this.style.display = 'none'
          mask.style.display = 'none'
        } else if (e.target.dataset.io === '1') {
          mask.style.display = 'none'
          guanzhu.classList.remove('bian')
          guanzhu.innerHTML = '关注'
          flag = true
          this.style.display = 'none'
        }
      })
    }
  })
})();

// 登录事件
// (function() {
//   const denglu = document.querySelector('.center')
//   const zc = document.querySelector('.zc')
//   // const gb =document.querySelector('.gb')
//   const xing = document.querySelector('.xing')
//   const center =document.querySelector('.center')

//   denglu.addEventListener('click',function() {
//     zc.style.opacity='1'
//     zc.style.zIndex='111'
//   })
//   center.addEventListener('click',function() {
//     zc.style.opacity='1'
//     zc.style.zIndex='111'
//   })
//   // gb.addEventListener('click',function() {
//   //   zc.style.opacity='0'
//   //   zc.style.zIndex='-1'

//   // })
//   xing.addEventListener('click',function(e) {
//     if(e.target.tagName === 'SPAN') {
//       zc.style.opacity='1'
//       zc.style.zIndex='111'
//     }
//   })
//   submit.addEventListener('click',function() {
//     center.style.display = 'none'

//   })
// })();

// 评论区
(function () {
  // 思路：
  // 1. 文本域获取焦点时：让统计字数的 total 显示出来（opacity: 1）

  // 获取元素
  const totalDOM = document.querySelector('.total')
  const txa = document.querySelector('#tx')
  // 评论区的DOM对象
  const item = document.querySelector('.item')
  const text = document.querySelector('.text')

  // 发布
  const fabu = document.querySelector('.fabu')
  // function 显示total() {
  function showTotal() {
    totalDOM.style.opacity = 1
    fabu.style.display = 'block'
  }

  // function 隐藏total() {
  function hideTotal() {
    totalDOM.style.opacity = 0
  }

  txa.addEventListener('focus', showTotal)

  txa.addEventListener('blur', hideTotal)

  // 在文本域中输入的时候，统计字数：
  // 每在文本域中输入一个字符，就统计当前所有文本域中字符的长度
  txa.addEventListener('input', function (e) {
    // console.log(txa.value.length)
    totalDOM.innerHTML = `${txa.value.length}/200字`

  })

  txa.addEventListener('keyup', function (e) {
    // this: this 指向谁？
    // console.log(e.key)
    // 如果按下的是回车
    // 1. 显示评论区
    // 2. 更新评论
    // 3. 清除文本域的value
    if (e.key === 'Enter') {
      item.style.display = 'block'
      text.innerHTML = this.value
      this.value = ''
      totalDOM.innerHTML = `0/200字`
    }
  })

})();

// 登录页面
(function () {
  const zc = document.querySelector('.zc')
  const tel = document.querySelector('.tel')
  const cha = document.querySelector('.icon-chacha')
  const yzm = document.querySelector('.code-button')
  const phone = document.querySelector('.phone')
  const eng = document.querySelector('.num')
  const an = document.querySelector('.submit')
  const xy = document.querySelector('.icon-duigouxiao')
  const tooltip = document.querySelector('.tooltip')
  const gb = document.querySelector('.gb')

  const center = document.querySelector('.center')
  const xing = document.querySelector('.xing')
  center.addEventListener('click', function () {
    zc.style.opacity = '1'
    zc.style.zIndex = '111'
  })
  xing.addEventListener('click', function (e) {
    if (e.target.tagName === 'SPAN') {
      zc.style.opacity = '1'
      zc.style.zIndex = '111'
    }
  })
  tel.addEventListener('input', function () {
    const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    //当表单里有值的时候
    if (tel.value) {
      cha.style.display = 'block'
      //当值长度为11的时候
      if (tel.value.length === 11) {
        yzm.style.color = '#ff2442'
        //验证码亮了之后 添加点击事件
        yzm.addEventListener('click', function () {
          //如果用户输入的值不满足正则的时候
          if (!reg.test(tel.value)) {
            phone.nextElementSibling.innerHTML = '发送验证码失败'
          }
          //当用户输入的值满足正则的时候
          else {
            phone.nextElementSibling.innerHTML = '已发送'
            let i = 5
            yzm.innerHTML = '重新发送(5s)'
            yzm.style.color = 'rgba(255,36,66,.3)'
            let n = setInterval(function () {
              i--
              yzm.innerHTML = `重新发送(${i}S)`
              // 当定时器到0的时候
              if (i === 0) {
                clearInterval(n)
                yzm.style.color = '#ff2442'
                yzm.innerHTML = '重新发送'
              }
            }, 1000)
          }
        })
      }
      //当值长度不到11位的时候
      else {
        yzm.style.color = 'rgba(255,36,66,.3)'
      }
    }
    //当表单里没值的时候
    else {
      cha.style.display = 'none'
      yzm.style.color = 'rgba(255,36,66,.3)'
      phone.nextElementSibling.innerHTML = ''
      yzm.innerHTML = '发送验证码'
    }

    eng.addEventListener('input', function () {
      if (eng.value.length >= 4 && tel.value.length === 11) {
        an.style.backgroundColor = '#ff2442'
        an.style.color = '#fff'

      } else {
        an.style.backgroundColor = 'rgba(0, 0, 0, 0.04)'
        an.style.color = '#333'
      }
    })
  })

  let flag = true
  xy.addEventListener('click', function () {
    if (flag) {
      xy.style.opacity = '1'
      flag = false
      // an.disabeld = true
      tooltip.style.opacity = '0'

    } else {
      xy.style.opacity = '0'
      flag = true
    }
  })

  an.addEventListener('click', function () {
    if (!flag && eng.value.length >= 4 && tel.value.length === 11) {
      // 点击登录要跳转的网址写到这
      // location.href = "../HTML/denglu.html"
     
      zc.style.opacity = '0'
      zc.style.zIndex = '-1'
      center.style.display = 'none'

    } else if (flag) {
      tooltip.style.opacity = '1'
    } else {
      return
    }

  })

  cha.addEventListener('click', function () {
    tel.value = ''

  })
  gb.addEventListener('click', function () {
    zc.style.opacity = '0'
    zc.style.zIndex = '-1'
  })

})();